let resultComponent = {
    template: `
        <div class="result page">
            <div class="head">
               <div class="left" @click="back">
                    <span class="iconfont icon-ali-fanhui"></span>
                </div>
                <div class="title">Course Statistics</div>
                <div class="right"></div>
            </div>
            <div class="main">
                <div class="time border">
                     {{detail.publishTime}}
                </div>
                <div class="name cell">
                    <div class="label">课程名称：</div>
                    <div class="value">{{detail.name}}</div>
                </div>
                <div class="time-length cell">
                    <div class="label">课程时长：</div>
                     <div class="value">{{parseTimeDuration(detail.timeout)}}</div>
                </div>
                <div class="type cell">
                     <div class="label">课程类别：</div>
                     <div class="value">{{detail.category}}</div>
                </div>
                <div class="use-length cell" v-show="useLength">
                     <div class="label">总用时：{{parseTimeDuration(useLength)}}</div>
                     <div class="value"></div>
                </div>
                <div class="time-line-box" v-show="false">
                    <p>TimeLine</p>
                    <div class="time-line">
                        <div class="item" v-for="item in timelineList"></div>
                    </div>
                </div>
                <div class="result-box">
                    <p>Result</p>
                    <div class="power">
                        <div class="item" v-for="item in powerList">
                            <div class="name">
                                name:{{item.name}}
                            </div>
                           <div class="name">
                                score:{{item.score}} / {{(item.allScore * item.answerLength)}}
                            </div>
                            <el-progress type="circle" :stroke-width="3" :percentage="(item.score / (item.allScore * item.answerLength) * 100)" :color="customColors" :show-text="false"/>
           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            detail: {},
            timelineList: [{
                content: 'aaa',
                timestamp: '16:ss'
            }],
            customColors : [
                { color: 'red', percentage: 25 },
                { color: '#e6a23c', percentage: 50 },
                { color: 'blue', percentage: 75 },
                { color: 'green', percentage: 100 },
            ],
            powerList: [
            //     {
            //     type:'情绪',
            //     value: 74
            // },{
            //     type:'体感',
            //     value: 40
            // }
            ],
            useLength:null
        }

    },
    computed: {

    },
    watch: {},
    mounted() {

        this.sessionId = this.$route.query.sessionId
        let detail = {}
        treatmentSession.getItem(this.sessionId).then((session)=>{
            detail = session
            detail.timeout = 0
            category.getList().then((result)=>{
                result.forEach((item)=>{
                   if(item.id === detail.categoryId){
                       detail.category = item.name
                   }
                })
                section.getList({
                    sessionId: this.sessionId
                }).then((list)=>{
                    list.forEach((item)=>{
                        detail.timeout+=item.timeout
                    })
                    this.detail = detail
                })
            })
            question.getList(this.sessionId).then((r)=>{
                let questionId = []
                let powerList = []
                r.entities.forEach((item)=>{
                    item.allScore = 0
                    item.answerLength = 0
                    item.score = 0
                    item.items.forEach((e)=>{
                        let score = 0
                        e.options.forEach((o)=>{
                            if(o.score> score){
                                score = o.score
                            }
                        })
                        item.allScore+=score
                    })
                    powerList.push(item)
                    questionId.push(item.id)
                })
                if(questionId.length){
                    questionInstances.getList(JSON.stringify({questionnaireId:{"op":"IN","value":questionId}})).then((qi)=>{
                        qi.entities = [qi.entities.pop()]
                        qi.entities.forEach((item)=> {

                            let i = powerList.findIndex((e)=>{
                                return e.id === item.questionnaireId
                            })
                            powerList[i].answerLength ++
                            item.items.forEach((e) => {
                                powerList[i].score+=e.score
                            })
                        })
                        this.powerList = powerList
                        console.log( this.powerList)
                    })
                }

            })

        })

        sessionInstances.getList(this.sessionId).then((r)=>{
            let useLength = 0
            r.entities.forEach((item)=>{
                if(item.startTime && item.endTime){
                    useLength+= (new Date(item.endTime) - new Date(item.startTime))
                 }
            })
            this.useLength = useLength
        })
    },
    activated() {

    },
    methods: {
        parseTimeDuration,
        submit(){

            let items = []
            this.questionList.forEach((question)=>{

                items.push({
                    questionnaireItemId: question.id,
                    option:{
                        score: question.answer,
                        answer: question.answer
                    }
                })
            })
            question.submit({
                questionnaireId:this.questionnaireId,
                items: items
            }).then(()=>{
                this.questionState=false
                this.$message.success('submit success!')

            })
        },
        nextHint(){
            if(this.hintIndex>=this.hintList.length-1){
                this.start()
            } else {
                this.hintIndex+=1
            }
        },
        parseTime(msTime){
            let time = msTime ;

            let hour = Math.floor(time / 60 / 60);

            hour = hour.toString().padStart(2, "0");

            let minute = Math.floor(time / 60) % 60;

            minute = minute.toString().padStart(2, "0");

            let second = Math.ceil(time) % 60;

            second = second.toString().padStart(2, "0");

            return `${hour}:${minute}:${second}`;
        },
        handleClick(){
            switch (this.state){
                case 0:
                    this.state = 1
                    this.controlState = false
                    this.start()
                    break
                case 1:
                    this.controlState = false
                    this.processStep(this.stepIndex+1)
                    break
            }
        },
        back(){
            this.$router.back()
        },
        start(){
            this.state = 1
            this.processSection(0)
        },
        processSection(sectionIndex){
            this.sectionIndex = sectionIndex
            if(this.section.name){
                this.processStep(0)
            }else{
                this.state = 2
                // this.$message.success('Learning completed!')
            }
        },
        processStep(index){
            if(this.stepTimer){
                clearTimeout(this.stepTimer)
                this.stepTimer = null
            }
            if(this.controlTimer){
                clearTimeout(this.controlTimer)
                this.controlTimer = null
            }
            if(this.section.stepList&&this.section.stepList[index]){
                this.stepIndex = index
                let step = this.section.stepList[index]
                switch (step.type){
                    case 'content':
                        this.playAudio(step.src)
                        break
                    case 'control':
                        this.controlState = true
                        this.controlTimer = setTimeout(()=>{
                            if(step.src){
                                this.reminder.src = step.src
                                this.reminder.play()
                            }

                        },step.timeout/2)
                        this.stepTimer = setTimeout(()=>{

                            this.handleClick(index+1)
                        },step.timeout)
                        break
                }
            }else{
                this.processSection(this.sectionIndex+1)
            }
        },
        playAudio(src){

            this.playback.src = src
            this.playback.play()
            this.reminder.pause()
        },
        viewControl(){

        }
    },
    components: {},
    beforeRouteLeave(to, from, next) {
        next();
    }
}

